<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="city-picker" @click="gotoCity">
				<text>{{ currentCity }}</text>
				<image src="/static/img/xiajiantou.png" mode="" style="width: 20px;height: 20px;"></image>
			</view>
			<view class="search-input" @click="goToSearch">
				<image src="/static/img/sousuo.png" mode="" style="width: 20px;height: 20px;"></image>
				<input type="text" placeholder="请输入小区或地址" readonly />
			</view>
			<view @click="ditu">
				<image src="/static/img/dituzhaofang-copy.png" mode="" style="width: 20px;height: 20px;"></image>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="banner" :current="current" @change="onSwiperChange" circular :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in sw" :key="index">
				<image :src="'http://localhost:8080' + item.imgSrc" mode="aspectFill"></image>
			</swiper-item>
		</swiper>


		<!-- 功能导航栏 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
				<image :src="item.icon" mode="" style="width: 50px;height: 50px;"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>

		<!-- 租房小组 -->
		<view class="group-section">
			<view class="section-header">
				<text>租房小组</text>
				<text class="more">更多</text>
			</view>
			<view class="group-list">
				<view class="group-item" v-for="(item, index) in groupitem" :key="index">
					
					<view class="zi">
						<text class="group-title">{{ item.title }}</text>
						<text class="group-desc">{{ item.desc }}</text>
					</view>
					<image :src="'http://localhost:8080' + item.imgSrc" mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<!-- 最新资讯 -->
		<view class="news-section">
			<view class="section-header">
				<text>最新资讯</text>
			</view>
			<view class="news-list">
				<view class="news-item" v-for="(item, index) in newsitem" :key="item.id">
					<image :src="'http://localhost:8080' + item.imgSrc" mode="aspectFill"></image>
					<view class="news-content">
						<text class="news-title">{{ item.title }}</text>
						<view class="news-meta">
							<text>{{ item.from }}</text>
							<text>{{ item.date }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"

	// // 房租小组
	const groupitem = ref([])
	// // 最新资讯
	const newsitem = ref([])
	// 轮播
	const sw = ref([])
	// 热门城市
	const hotCities = ref([])

	// // 房租小组
	uni.request({
		url: "http://localhost:8080/home/groups",
		method: 'GET',
		success: (res) => {
			console.log(res);
			groupitem.value = res.data.body
		}
	});

	// // 资讯
	uni.request({
		url: "http://localhost:8080/home/news",
		method: 'GET',
		success: (res) => {
			console.log(res);
			newsitem.value = res.data.body
		}
	});

	// 轮播
	uni.request({
		url: "http://localhost:8080/home/swiper",
		method: "GET",
		success: (res) => {
			sw.value = res.data.body
		}
	})
	// lunbo
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval =ref(2000)
	const duration = ref(500)
// lunbo
  const  changeIndicatorDots=(e) =>{
            this.indicatorDots = !this.indicatorDots
        }
     const   changeAutoplay=(e) =>{
            this.autoplay = !this.autoplay
        }
     const   intervalChange=(e) =>{
            this.interval = e.target.value
        }
    const    durationChange=(e) =>{
            this.duration = e.target.value
        }
		
	// 当前选择的城市
	const currentCity = ref('南京');
	const currentCityId = ref('AREA_2bc437ca-b3d2-5c3c'); // 默认城市ID

	const current = ref(0);
	const onSwiperChange = (e) => {
		current.value = e.detail.current;
	};

	// 功能导航数据
	const navList = reactive([{
			icon: '/static/img/shouyegory.png',
			text: '整租'
		},
		{
			icon: '/static/img/yunxuhezu.png',
			text: '合租'
		},
		{
			icon: '/static/img/dituzhaofang-copy.png',
			text: '地图找房'
		},
		{
			icon: '/static/img/Carbarn.png',
			text: '去出租'
		},
	]);

	// 导航栏点击处理函数
	const handleNavClick = (item) => {
	  // 只有点击'去出租'时才跳转
	  if (item.text === '去出租') {
	    uni.navigateTo({
	      url:'/ulit/housepublish/housepublish'
	    })
	  }
	  // 其他项目点击时不进行跳转
	};

	// 地址信息
	const gotoCity = () => {
		uni.navigateTo({
			url: "/ulit/city/city"
		})
	}
	
	const ditu = ()=>{
		uni.navigateTo({
			url:"/ulit/ditu/ditu"
		})
	}

	// 监听城市选择事件
	const handleCitySelected = (city) => {
		// 确保只使用城市名称进行显示
		currentCity.value = typeof city === 'string' ? city : city.label || '南京';
		// 存储城市ID
		currentCityId.value = typeof city === 'string' ? (city === '南京' ? 'AREA_2bc437ca-b3d2-5c3c' : `AREA_${city.toLowerCase()}`) : city.value || city.id;
	};

	// 当跳转到搜索页时，传递城市信息
	const goToSearch = () => {
		uni.navigateTo({
			url: `/pages/search/search?city=${currentCity.value}&cityId=${currentCityId.value}`
		});
	};

	// 选择热门城市
	const selectHotCity = (city) => {
		// 更新当前城市信息
		currentCity.value = city.label;
		currentCityId.value = city.value;
		
		// 触发城市选择事件，让其他页面同步更新
		uni.$emit('citySelected', city);
	};

	onMounted(() => {
		// 监听城市选择事件
		uni.$on('citySelected', handleCitySelected);
		
		// 获取热门城市列表
		uni.request({
			url: "http://localhost:8080/area/hot",
			method: 'GET',
			success: (res) => {
				console.log('热门城市数据:', res);
				hotCities.value = res.data.body;
			}
		});
	});

	onUnmounted(() => {
		// 清理事件监听
		uni.$off('citySelected', handleCitySelected);
	});
</script>


<style scoped>
	.container {
		padding-bottom: 60px;
		/* 给底部导航留空间 */
	}

	/* 搜索栏 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 10px;
		/* background-color: #c0efff; */
	}

	.city-picker {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.search-input {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		padding: 8px;
	}

	.search-input input {
		flex: 1;
		margin-left: 5px;
	}

	/* 热门城市样式 */
	.hot-cities-section {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.hot-cities-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.hot-city-item {
		padding: 8px 15px;
		background-color: #f5f5f5;
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.hot-city-item.active {
		background-color: #007aff;
		color: #fff;
	}

	.hot-city-item:active {
		transform: scale(0.95);
	}

	/* 轮播图 */
	.banner {
		width: 100%;
		height: 200px;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.banner-desc {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
	}

	.sub-title {
		font-size: 12px;
		display: block;
		margin-bottom: 10px;
	}

	.banner-btn {
		background-color: #fff;
		color: #000;
		font-size: 12px;
		padding: 2px 10px;
		border-radius: 4px;
	}

	/* 功能导航 */
	.nav-list {
		display: flex;
		justify-content: space-around;
		padding: 15px 0;
		background-color: #fff;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-item text {
		margin-top: 5px;
		font-size: 14px;
	}

	/* 租房小组 */
	.group-section,
	.news-section {
		margin-top: 10px;
		background-color: #fff;
		padding: 10px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-header text {
		font-size: 16px;
		font-weight: bold;
	}

	.more {
		font-size: 14px;
		color: #999;
		font-weight: normal;
	}

	.group-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.group-item {
		width: 48%;
		margin-bottom: 10px;
		text-align: center;
		display: flex;
		background-color: #fff;

	}

	.group-item image {
		width: 51%;
		height: 80px;
		border-radius: 4px;
	}

	.group-title {
		display: block;
		margin: 5px 0;
		font-weight: bold;
		font-size: 26rpx;
	}

	.group-desc {
		font-size: 12px;
		color: #999;
		flex-wrap: nowrap;
	}

	/* 最新资讯 */
	.news-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.news-item {
		display: flex;
		gap: 10px;
	}

	.news-item image {
		width: 120px;
		height: 80px;
		border-radius: 4px;
	}

	.news-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.news-title {
		font-size: 14px;
		line-height: 1.5;
		display: block;
	}

	.news-meta {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #999;
	}

	.zi {
		padding: 10rpx;
		/* display: flex; */
		justify-content: center;
		align-items: center;
	}
</style>